// 引入 useState React 16.8.0 版本中提供个 hook
import { useState } from "react";
// 引入 一个 svg 图片
import reactLogo from "./assets/react.svg";
// 引入 一个 svg 图片
import viteLogo from "/vite.svg";
// 引入 一个 App.css 【全局样式】
import "./App.css";

// 定义一个函数组件
//    App 就是组件的名字，需要使用大驼峰语法
function App() {
  console.log("App 渲染");
  // 调用 useState() 创建状态数据
  //    0 - 状态数据的初始值
  //    count     - 该状态数据的一个变量
  //    setCount  - 更新该状态数据的一个函数
  const [count, setCount] = useState(0);

  // return 返回的内容就是组件的模板内容
  return (
    <>
      <div>
        {/* 
          React 中的图片，必须先引入再使用，区别于 Vue 中template中直接使用的操作
            关键是：Vue 的单文件组件是会被编译成 js 的。而编译过程中，编译器会做导入图片的操作
        */}
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        {/* onClick 绑定点击事件 */}
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

// 默认导出 App 组件
export default App;
